<template>
<!--    <div style="padding-top: 100px;">-->
<!--        <div @click="space" style="margin-top:20px;">空间管理</div>-->
<!--        <div @click="operate" style="margin-top:20px;">运营管理</div>-->
<!--        <div @click="property" style="margin-top:20px;">物业管理</div>-->
<!--        <div style="margin-top:20px;">资本管理</div>-->
<!--    </div>-->
    <div>
        <div class="top">
            <img class="returnImg" src="../../assets/imgs/home/returnIcon2.png" alt="" v-on:click="back">
            <img class="topImg" src="../map/images/Location.png" alt="">
            <p class="topTitle">大悦商城</p>
        </div>
<!--        四个入口-->
        <div class="entrance">
            <div @click="space" class="entranceBox" style="margin-left: 14px;">
                <img class="entranceImg" src="../map/images/entrance1.png" alt="">
                <p class="entranceName">空间管理</p>
            </div>
            <div @click="operate" class="entranceBox" style="margin-left: 4px;">
                <img class="entranceImg" src="../map/images/entrance2.png" alt="">
                <p class="entranceName">运营管理</p>
            </div>
            <div @click="property" class="entranceBox" style="margin-left: 4px;">
                <img class="entranceImg" src="../map/images/entrance3.png" alt="">
                <p class="entranceName">物业管理</p>
            </div>
            <div @click="administration" class="entranceBox" style="margin-left:4px;">
                <img class="entranceImg" src="../map/images/entrance4.png" alt="">
                <p class="entranceName">资本管理</p>
            </div>

        </div>
<!--        客流量-->
        <div class="amount">
<!--            顶部-->
            <div class="title">
                <p class="titleName">客流量</p>
                <div class="titleBck"></div>
            </div>
<!--            数据-->
            <div class="data">
                <div class="dataBox" style="color: #F66D61;margin-left: 26px;">
                    <p class="dataNum">{{detail.flow.sameMonth}}<span>人</span> </p>
                    <p class="dataName">本月客流量</p>
                </div>
                <div class="dataBox" style="color: #255ED7;flex: 1;text-align: center;">
                    <p class="dataNum">{{detail.flow.lastMonth}}<span>人</span> </p>
                    <p class="dataName">上月客流量</p>
                </div>
                <div class="dataBox" style="color: #666666;margin-right: 26px;">
                    <p class="dataNum">{{detail.flow.lastyear}}<span>人</span> </p>
                    <p class="dataName">去年同月</p>
                </div>
            </div>
<!--            对比值-->
            <div class="contrast">
                <div class="contrastBox">
                    <p class="contrastName">客流量月环比：{{detail.flow.monthCompare}}</p>
                    <img class="contrastImg" src="./images/topIcon.png" alt="">
                </div>
                <div class="contrastBox">
                    <p class="contrastName">客流量年环比：{{detail.flow.yearCompare}}</p>
                    <img class="contrastImg" src="./images/downIcon.png" alt="">
                </div>
            </div>
        </div>
<!--        销售额-->
        <div class="amount">
            <!--            顶部-->
            <div class="title">
                <p class="titleName">销售额</p>
                <div class="titleBck"></div>
            </div>
            <!--            数据-->
            <div class="data">
                <div class="dataBox" style="color: #F66D61;margin-left: 26px;">
                    <p class="dataNum">{{sameMonth}}<span>万元</span> </p>
                    <p class="dataName">本月销售额</p>
                </div>
                <div class="dataBox" style="color: #255ED7;flex: 1;text-align: center;">
                    <p class="dataNum">{{lastMonth}}<span>万元</span> </p>
                    <p class="dataName">上月销售额</p>
                </div>
                <div class="dataBox" style="color: #666666;margin-right: 26px;">
                    <p class="dataNum">{{lastyear}}<span>万元</span> </p>
                    <p class="dataName">去年同月</p>
                </div>
            </div>
            <!--            对比值-->
            <div class="contrast">
                <div class="contrastBox">
                    <p class="contrastName">销售额月环比：{{detail.sale.monthCompare}}</p>
                    <img class="contrastImg" src="./images/topIcon.png" alt="">
                </div>
                <div class="contrastBox">
                    <p class="contrastName">销售额年环比：{{detail.sale.yearCompare}}</p>
                    <img class="contrastImg" src="./images/downIcon.png" alt="">
                </div>
            </div>
        </div>
<!--        空间占比-->
        <div class="space" style="padding-bottom: 80px;">
            <div class="spaceBox" style="margin-left: 14px;">
                <p class="spaceTitle">已使用空间</p>
                <div class="spaceLine"></div>
                <p class="spaceNum">商铺数量：<span style="color: #46BC74;">{{detail.space.userArea}}家</span> </p>
                <p class="spaceNum2">面积：{{detail.space.reaminArea}}m²</p>
            </div>
            <div class="spaceBox" style="margin-left: 10px;">
                <p class="spaceTitle">未使用空间</p>
                <div class="spaceLine"></div>
                <p class="spaceNum">商铺数量：<span style="color: #F66D61;">{{detail.space.useAmount}}家</span> </p>
                <p class="spaceNum2">面积：{{detail.space.remainAmount}}m²</p>
            </div>
        </div>
<!--        <p>宽 {{screenWidth}}</p>-->
<!--        <p>高 {{screeHeight}}</p>-->
    </div>
</template>

<script>
    export default {
        name: "demoIndex",
        data(){
            return{
                detail:[],
                sameMonth:'',
                lastMonth:'',
                lastyear:''
            }
        },
        methods:{
            space(){
                this.$router.push({path: "/space"})
            },
            operate(){
                this.$router.push({path: "/operate"})
            },
            property(){
                this.$router.push({path: "/map"})
            },
            administration(){
                this.$router.push({path: "/Administration"})
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
        },
        mounted(){
            document.body.addEventListener('touchstart', function () {});
            this.$api.get('market/home/index' , {}, response => {
                if (response.status >= 200 && response.status < 300) {
                    this.detail = response.data.data
                    var val1 = response.data.data.sale.sameMonth.toString()
                    this.sameMonth = val1.slice(0,2)
                    var val2 = response.data.data.sale.lastMonth.toString()
                    this.lastMonth = val2.slice(0,2)
                    var val3 = response.data.data.sale.lastyear.toString()
                    this.lastyear = val3.slice(0,2)
                } else {
                    // console.log(response.message);
                    //请求失败，response为失败信息
                }
            });
        },
        // beforeRouteLeave(to,from,next){
        //     to.meta.isBack = false;
        //     next()
        // }
    }
</script>

<style scoped>
    body{
        background: #F9F9F9 !important;
    }
    #app{
        font-family: font1 !important;
    }
    .top{
        width: 100%;
        height: 44px;
        background:linear-gradient(270deg,rgba(76,151,237,1) 0%,rgba(37,94,215,1) 100%);
        box-shadow:0px 2px 29px 0px rgba(193,193,193,0.5);
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        z-index: 100;
    }
    .returnImg{
        z-index: 100;
        width: 10px;
        height: 19px;
        left: 16px;
        position: absolute;
        top: 14px;
    }
    .topImg{
        width: 10px;
        height: 14px;
        margin-left: 120px;
    }
    .topTitle{
        font-size: 18px;
        font-width: 500;
        margin-left: 14px;
        color: #fff;
    }
    /*四个入口*/
    .entrance{
        width: 350px;
        height: 100px;
        background: #fff;
        border-radius: 4px;
        margin: 56px auto 0 auto;
        box-shadow:0px 1px 21px 0px rgba(191,191,191,0.5);
        display: flex;
        align-items: center;
    }
    .entranceBox{
        /*flex: 1;*/
        text-align: center;
        width: 78px;
        height: 82px;
        border-radius: 5px;
    }
    .entranceBox:active{
        background: #EEEEEE;
    }
    .entranceImg{
        width: 46px;
        height: 46px;
        border-radius: 50%;
        margin-top: 6px;
    }
    .entranceName{
        font-size: 12px;
        color: #666666;
        margin-top: 12px;
        text-align: center;
    }
    /*客流量*/
    .amount{
        width: 350px;
        height: 162px;
        background: #fff;
        border-radius: 5px;
        margin: 10px auto 0 auto;
        box-shadow:0px 1px 26px 0px rgba(191,191,191,0.5);
    }
    .title{
        padding-top: 18px;
        margin-left: 16px;
        position: relative;
    }
    .titleName{
        font-family: font2 !important;
        font-size: 18px;
        color: #2C2C2C;
        position: absolute;
        /*font-weight: 600;*/
        left: 3px;
        z-index: 2;
        top: 18px;
    }
    .titleBck{
        width: 65px;
        height: 9px;
        border-radius: 2px;
        background: #E0EAFF;
        position: absolute;
        left: 0;
        top: 30px;
        z-index: 0;
    }
    /*数据*/
    .data{
        margin-top: 40px;
        display: flex;
        align-items: center;
    }
    .dataBox{
        text-align: center;
        /*flex: 1;*/
        text-align: center;
    }
    .dataNum{
        font-size: 20px;
        /*font-weight: 600;*/
        text-align: center;
    }
    .dataNum span{
        font-size: 11px;
    }
    .dataName{
        font-size: 12px;
        color: #666666;
        margin-top: 6px;
        text-align: center;
    }
    /*对比值*/
    .contrast{
        width: 326px;
        height: 34px;
        background: #F6F6F6;
        border-radius: 5px;
        margin: 14px auto 0 auto;
        display: flex;
        align-items: center;

    }
    .contrastBox{
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
    }
    .contrastName{
        font-size: 12px;
        color: #666666;
    }
    .contrastImg{
        width: 10px;
        height: 8px;
        margin-left: 6px;
    }
    /*空间占比*/
    .space{
        margin-top: 10px;
        display: flex;
    }
    .spaceBox{
        width: 170px;
        height: 108px;
        background: #fff;
        border-radius: 5px;
        box-shadow:0px 1px 26px 0px rgba(191,191,191,0.5);
        position: relative;
    }
    .spaceTitle{
        font-size: 15px;
        color: #2C2C2C;
        position: absolute;
        top:20px;
        left: 22px;
        font-weight: 600;
        z-index: 10;
    }
    .spaceLine{
        width: 86px;
        height: 10px;
        background: #E0EAFF;
        border-radius: 2px;
        position: absolute;
        top: 30px;
        left: 19px;
        z-index: 0;
    }
    .spaceNum{
        font-size: 12px;
        color: #666666;
        margin-top: 54px;
        margin-left: 22px;
    }
    .spaceNum2{
        font-size: 12px;
        color: #666666;
        margin-top: 10px;
        margin-left: 22px;
    }
</style>
